<ion-header [translucent]="true">
  <ion-toolbar
    style="height: 3rem;background-image: url('/assets/header.jpg');"
  >
    <ion-button routerLink="/delect" fill="clear" slot="end">
      <span>删除</span>
    </ion-button>
    <ion-title>
      我的书架
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" overflow-scroll="true">
  <ion-refresher
    slot="fixed"
    (ionRefresh)="doRefresh($event)"
    pullFactor="0.8"
    pullMin="60"
    pullMax="120"
  >
    <ion-refresher-content
      pullingIcon="chevron-down-circle-outline"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="刷新中..."
    ></ion-refresher-content>
  </ion-refresher>
  <ion-grid fixed *ngIf="res">
    <ion-row>
      <ng-container *ngIf="iseExist=='true'; else elseTemplate">
        <ion-col
          size="4"
          *ngFor="let item of res.results; let i=index"
          [routerLink]="['/cate',{num_id: 1,title:item.title}]"
          style="text-align: center;background-color:cornsilk;"
        >
          <div>
            <img
              [src]="item.cover"
              alt=""
              style="width: 5em;border-radius: 0.2em;margin: 0.5em;"
            />
            <p style="margin-top: -0.1em;">{{item.title}}</p>
          </div>
        </ion-col>
      </ng-container>
      <ng-template #elseTemplate>
        <ion-col
          size="4"
          *ngFor="let item of res.results; let i=index"
          [routerLink]="['/cate',{num_id: 1,title:item.title}]"
          (click)="addHistory(item.title)"
          style="text-align: center;background-color:cornsilk;"
        >
          <div>
            <img
              [src]="item.cover"
              alt=""
              style="width: 5em;border-radius: 0.2em;margin: 0.5em;"
            />
            <p style="margin-top: -0.1em;">{{item.title}}</p>
          </div>
        </ion-col>
      </ng-template>
    </ion-row>
    <h6 align="center" style="color: gray;" *ngIf="res.results.length==0">
      去添加你喜欢的小说吧！
    </h6>
  </ion-grid>
</ion-content>
